<template>
<div class="p-grid">
	<div class="p-col-12">
		<div class="card">
			<h4>文本</h4>
			<p>使用PrimeFlex文本实用程序管理文本的对齐方式和样式。</p>

			<h5>对齐</h5>
			<div class="p-mb-3 p-text-left">Left</div>
			<div class="p-mb-3 p-text-center">Center</div>
			<div class="p-text-right">Right</div>

			<h5>包装 Wrap</h5>
			<div class="p-mb-3 demo-container" style="width: 10rem">长文本会自动换行，并且不会溢出。</div>
			<div class="p-mb-3 demo-container p-text-nowrap" style="width: 10rem">长文本不会自动换行，并且会使父级溢出。</div>
			<div class="p-mb-3 demo-container p-text-nowrap p-text-truncate" style="width: 10rem">长文本不会自动换行，也不会使父级溢出。</div>

			<h5>转变 Transform</h5>
			<div class="p-mb-3 p-text-lowercase">LOWERCASE</div>
			<div class="p-mb-3 p-text-uppercase">uppercase</div>
			<div class="p-text-capitalize">capitalize</div>

			<h5>样式 Style</h5>
			<div class="p-mb-3 p-text-bold">Bold</div>
			<div class="p-mb-3 p-text-normal">Normal</div>
			<div class="p-mb-3 p-text-light">Light</div>
			<div class="p-mb-3 p-text-italic">Italic</div>
		</div>
	</div>
</div>
</template>

<script>
</script>

<style scoped>
	.demo-container {
		border: 2px solid #dee2e6;
	}
</style>
